const { ratio, dpr } = require("./global")

// canvas实例
export default class Canvas {
    constructor(canvas, width, height) {
        this.canvas = canvas
        this.ctx = canvas.getContext('2d')
        this.canvas.width = width * dpr
        this.canvas.height = height * dpr
        this.ctx.scale(dpr, dpr)

        this.restart()
    }
    // 数据管理
    updateData(width, height) {
        this.x = width // 1in 的 px 长度
        this.x_cm = width / ratio.value / 96 * 2.54
        this.x_in = width / ratio.value / 96

        this.y = height
        this.y_cm = height / ratio.value / 96 * 2.54
        this.y_in = height / ratio.value / 96
    }

    restart() {
        this.frame = 0 // 帧数
        this.updateData(ratio.value * 96, ratio.value * 96 * 2) // 数据重载，初始宽高1in

        this.r = 5 // 移动的点的半径
        this.canLoop = false //  是否需要循环更新canvas（是否按到点上）
        this.bindLoop = this.loop.bind(this) // 帧数叠加

        this.render()
        // 清除上一局的动画
        this.canvas.cancelAnimationFrame(this.aniId);
        // 重新执行动画
        this.aniId = this.canvas.requestAnimationFrame(
            this.bindLoop, //下一帧执行函数
            this.canvas
        )
    }
    touchstart(e) {
        let x = e.touches[0].x
        let y = e.touches[0].y
        
        if (x >= this.x - this.r - 10 &&
            x <= this.x + this.r + 10 &&
            y >= this.canvas.height / dpr - this.y - this.r - 10 &&
            y <= this.canvas.height / dpr - this.y + this.r + 10) {
            this.canLoop = true // 开始循环更新
            this.render()
        }
    }
    touchmove(e) {
        let width = this.canvas.width / dpr
        let height = this.canvas.height / dpr
        let x = e.touches[0].x
        let y = e.touches[0].y
        if (this.canLoop) {
            x = x < 0 ? 0 : x > width ? width : x
            y = y < 0 ? 0 : y > height ? height : y
            this.updateData(x, this.canvas.height / dpr - y)
        }
    }
    touchend(e) {
        this.canLoop = false
    }


    /**
     * canvas重绘函数
     * 每一帧重新绘制所有的需要展示的元素
     */
    render() {
        let ctx = this.ctx
        let width = this.canvas.width / dpr
        let height = this.canvas.height / dpr
        let x = this.x
        let y = height - this.y

        // 框
        ctx.fillStyle = 'rgba(0,0,0,0.2)'
        ctx.fillRect(0, y, x, height - y)

        // x、y两条线
        ctx.beginPath()
        ctx.strokeStyle = '#4e8fff'
        ctx.moveTo(x, 0)
        ctx.lineTo(x, height)
        ctx.moveTo(0, y)
        ctx.lineTo(height, y)
        ctx.stroke()

        // 点
        ctx.beginPath()
        ctx.fillStyle = '#4e8fff'
        ctx.arc(x, y, this.r, 0, 2 * Math.PI)
        ctx.fill()

        // 字
        ctx.fillStyle = '#4e8fff'
        ctx.font = "16px sans-serif"
        ctx.fillText(`${this.x_cm.toFixed(2)}*${this.y_cm.toFixed(2)} 厘米`, 50, 60)
        ctx.fillText(`${this.x_in.toFixed(2)}*${this.y_in.toFixed(2)} 英寸`, 50, 90)
    }

    // 实现帧循环
    loop() {
        if (this.canLoop) {
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) // 清空画布
            this.render()
        }

        this.aniId = this.canvas.requestAnimationFrame(
            this.bindLoop, //下一帧执行函数
            this.canvas
        )
    }
}